<template>
  <div class="user_container">
    <div class="user_header">
      <div class="block avatars">
        <el-avatar :size="100" :src="user.avatar"></el-avatar>
      </div>
      <div class="user_box">
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="user.nickName" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input v-model="user.username" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="绑定人">
            <el-input v-model="user.name" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="user.phone" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="user.createTime" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUser">更新基础信息</el-button>
            <el-button @click="editPwd">修改密码</el-button>
          </el-form-item>
        </el-form>

        <el-dialog title="基础信息更新" :visible.sync="renew" width="400px">
          <el-form :model="info">
            <el-form-item label="昵称" label-width="100px">
              <el-input v-model="info.nickName" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="头像" label-width="100px">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9000/api/file/oss"
                  :show-file-list="false"
                  :on-success="avatarSuccess">
                <img v-if="info.avatar" :src="info.avatar" class="avatar" alt="">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="renew=false">取 消</el-button>
            <el-button type="primary" @click="renewBtn">确定更新</el-button>
          </div>
        </el-dialog>

        <el-dialog title="修改密码" :visible.sync="pwdRenew" width="450px">

          <el-form :model="pwd">
            <el-form-item label="请输入密码" label-width="100px">
              <el-input v-model="pwd.passwordOne" autocomplete="off" style="width:250px" show-password ></el-input>
            </el-form-item>
            <el-form-item label="请重新输入" label-width="100px">
              <el-input v-model="pwd.passwordTwo" autocomplete="off" style="width:250px" show-password ></el-input>
            </el-form-item>
            <el-form-item label="验证码" label-width="100px">
              <el-input v-model="pwd.code" style="width:90px"></el-input>
              <el-button @click="verificationCode">获取验证码</el-button>
              <span style="padding-left:50px">{{ time===60?'':time }}</span>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="pwdRenew = false">取消</el-button>
            <el-button type="primary" @click="pwdBtn">确定修改</el-button>
          </div>
        </el-dialog>



      </div>
    </div>
  </div>
</template>

<script>
import {basicUserMsg, renewUser,getVerificationCode} from "@/api/auth/login";

export default {
  data(){
    return{
      flag:true,
      info:{
        id:'',
        nickName:'',
        avatar:''
      },
      user:{},
      pwd:{},
      token:this.$cookies.get("token"),
      renew:false,
      pwdRenew:false,
      codeFlag:true,
      time:60,
      text:"获取验证码",
      timer:null
    }
  },
  created() {
    this.getUser()
  },
  methods:{
    async getUser(){
      const {data:res} = await basicUserMsg(this.token)
      this.user = res.data.user
    },
    editUser(){
      this.info.id = this.user.id
      this.info.nickName = this.user.nickName
      this.info.avatar = this.user.avatar
      this.renew = true
    },
    avatarSuccess(res, file){
      this.info.avatar = file.response;
    },
    async renewBtn(){
      const {data:res} = await renewUser(this.info)
      if (res.code === 200 ){
        this.$message({
          message: res.message,
          type: 'success'
        });
        await this.getUser()
        this.$router.push({path: '/user'})
        this.renew = false
      }else {
        this.$message.error(res.message);
      }
    },
    editPwd(){
      this.pwdRenew = true
    },
    async verificationCode(){
      const {data:res} = await getVerificationCode(this.user)

      if (!this.codeFlag){
        return
      }
      this.codeFlag = false
      this.loading()
      this.timer = setInterval(()=>{
        if (this.time === 0){
          this.timer && this.clearTimer()
        }else {
          this.loading()
        }
      },1000)
    },
    loading(){
      this.time-=1
      this.text = "重新获取(" + this.time + ")"
    },
    clearTimer(){
      clearInterval(this.timer)
      this.timer = null
      this.text = "获取验证码"
      this.codeFlag = true
      this.time = 60
    },
    pwdBtn(){

    }
  }
}
</script>

<style scoped>
.user_header{
  margin:50px 30%;
}
.user_box{
  margin-top: 40px;
  margin-left: 23%;
}
.avatars{
  padding-left: 42%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
